import { Form, Row, Col,  Button } from 'antd';
import ProCard from '@ant-design/pro-card';
import styles from '../index.less';
import { history } from 'umi';
import TextArea from 'rc-textarea';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

export default () => {
  const [form] = Form.useForm();

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 10 },
    },
  };

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  return (
    <PageHeaderWrapper>
      <ProCard
        title=""
        bordered
        headerBordered
        direction="column"
        gutter={[0, 16]}
        style={{ marginTop: 8 }}
      >
        <ProCard bordered bodyStyle={{ padding: 0 }}>
          <div className={styles.createTitle}>招聘信息</div>
          <Form
            form={form}
            // name="advanced_search"
            // className="ant-advanced-search-form"
            onFinish={onFinish}
            {...formItemLayout}
          >
            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="职位"
                  required
                  rules={[{ required: true, message: '职位名称不能为空' }]}
                  //   validateStatus="error"
                  //   help="Should be combination of numbers & alphabets"
                >
                  产品经理
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item
                  label="HC总数"
                  //   hasFeedback
                  //   validateStatus="validating"
                  //   help="The information is being validated..."
                >
                  2
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="招聘开始日期"
                  required
                  rules={[{ required: true }]}
                  //   hasFeedback
                  //   validateStatus="success"
                >
                  2021-10-14
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item
                  label="招聘截至日期"
                  required
                  rules={[{ required: true }]}
                  //   hasFeedback
                  //   validateStatus="warning"
                >
                  2021-10-20
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="招聘负责人"
                  required
                  rules={[{ required: true }]}
                  //   hasFeedback
                  //   validateStatus="error"
                  //   help="Should be combination of numbers & alphabets"
                >
                  焦凯
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item label="协同人">张玲烨</Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="关联面试官"
                  rules={[{ required: true }]}
                  required
                  //   hasFeedback
                  //   validateStatus="warning"
                >
                  焦凯
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item
                  label="紧急程度"
                  rules={[{ required: true }]}
                  required
                  //   hasFeedback
                  //   validateStatus="error"
                >
                  紧急
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </ProCard>
        <ProCard bordered bodyStyle={{ padding: 0 }}>
          <div className={styles.createTitle}>HC明细</div>
          <Form
            form={form}
            name="advanced_search"
            // className="ant-advanced-search-form"
            onFinish={onFinish}
            {...formItemLayout}
          >
            <Row>
              <Col span={8} key={1}>
                <Form.Item label="招聘开始日期" required rules={[{ required: true }]}>
                  2021-10-14
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item label="数量" required rules={[{ required: true }]}>
                  2
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item
                  label="需求类型"
                  rules={[{ required: true }]}
                  required
                  //   hasFeedback
                  //   validateStatus="success"
                >
                  人员扩编
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item label="最晚到岗日期">2021-10-25</Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8} key={1}>
                <Form.Item label="需求提出人" required rules={[{ required: true }]}>
                  焦凯
                </Form.Item>
              </Col>
              <Col span={8} key={2}>
                <Form.Item label="备注">
                  <TextArea style={{ width: '100%' }} autoSize={{ minRows: 1, maxRows: 6 }} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </ProCard>
        <Row>
          <Col span={24} className={styles.createbtn}>
            <Button
              type="primary"
              htmlType="submit"
              onClick={() => {
                history.goBack();
              }}
            >
              返回上一级
            </Button>
          </Col>
        </Row>
      </ProCard>
    </PageHeaderWrapper>
  );
};
